<include file="../header" />
<body class="J_scroll_fixed">
    <script>

        function calculatePrice(shopId,cardType,termNumber){
            $.ajax({
                    type: "post",
                    url: "{:U('vip/calculatePrice')}",
                    data: {shopId:shopId, cardType:cardType, termNumber:termNumber},
                    dataType: "json",
                    success: function(data){
                        $("#price").html(data+'元');
                    }
                });
        }
        $(document).ready(function() {
               var shopId = $('select[name=shopId]').val();               
               var cardType = $('select[name=cardType]').val();
               var termNumber = $("input[name=termNumber]").val();
               calculatePrice(shopId,cardType,termNumber);
             

            $('select[name=shopId]').change(function() {
                
                var shopId = $(this).val();                
                var cardType = $('select[name=cardType]').val();
                var termNumber = $("input[name=termNumber]").val();
                calculatePrice(shopId,cardType,termNumber);
                var shopId = $(this).val();
                
                $.ajax({
                    type: "post",
                    url: "{:U('sale/getSaleListByShop')}",
                    data: {shopId:shopId},
                    dataType: "json",
                    success: function(data){
                        $("#selectSale").html(data);
                    
                    }
                });
            });

            $('select[name=cardType]').change(function() {
                
                var shopId = $('select[name=shopId]').val();               
                var cardType = $(this).val();
                var termNumber = $("input[name=termNumber]").val();
                calculatePrice(shopId,cardType,termNumber);
                
            });

            $('input[name=termNumber]').keyup(function() {
                
                var shopId = $('select[name=shopId]').val();
                
                var cardType = $("select[name=cardType]").val();
                var termNumber = $(this).val();
                
                //正则判断是否为数字
                if(!/^[0-9]+$/.test(termNumber)) {
                    layer.msg('时长应为数字!');
                    return false;
                }
                calculatePrice(shopId,cardType,termNumber);
            });
            $('button.offlineopen').click(function () {
                var termNumber = $("input[name=termNumber]").val();
                var saleId = $("select[name=saleId]").val();
                //正则判断是否为数字
                if(!/^[0-9]+$/.test(termNumber)||termNumber===''||termNumber===null) {
                    layer.msg('时长应为数字且不能为空!');
                    return false;
                }else{
                    $("#offline").submit();
                }
            });
            
            var shopId = $("select[name=shopId]").val();
            $.ajax({
                type: "post",
                url: "{:U('sale/getSaleListByShop')}",
                data: {shopId:shopId},
                dataType: "json",
                success: function(data){
                    $("#selectSale").html(data);

                }
            });
        });

    </script>
    <div class="wrap jj">
        <div class="common-form">
            <form id="offline" method="post" class="form-horizontal J_ajaxForm" action="{:U('vip/offlineBuyPost')}">
                <input type='hidden' name='vipId' value='{$vip.vip_id}' />
                <fieldset>
                    <div class="control-group">
                        <label class="control-label">店铺选择:</label>
                        <div class="controls">
                            {:getShopSelectHtml($shopId)}
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">推荐人员:</label>
                        <div class="controls" id="selectSale">
                            <select name="saleId" >
                                <option value="0">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">会员卡类型：</label>
                        <div class="controls">
                            {:getEnumSelectWidget($cards, 'cardType')}
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">支付方式:</label>
                        <div class="controls">
                            {:getEnumSelectWidget($paytype, 'payType')}
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">渠道:</label>
                        <div class="controls">
                            {:getEnumSelectWidget($channels, 'channel',$channel)}
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">时长：</label>
                        <div class="controls">
                            <input type="text" class="input" name="termNumber" value="1">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">价格：</label>
                        <div class="controls" id="price">

                        </div>
                    </div>
                </fieldset>
                <div class="form-actions">
                    <button  class="offlineopen btn">购买</button>                    
                </div>
            </form>
        </div>
    </div>
	<script src="__ROOT__/statics/js/common.js"></script>
</body>
</html>